<template>
  <div class="over-bg">
    <div class="banner flex align-center js-st">
      <div class="text-left banner-text">
        <div class="tit share-color">
          {{
            isHosting ? $t("hosting.robotHosting") : $t("header.wealthTreasure")
          }}
        </div>
        <div class="share-color font-20">{{ $t("newTheme.zeroRisk") }}</div>
      </div>
      <!-- <img src="@/assets/theme1/defibanner.png" alt="" class="phone-img" /> -->
    </div>
    <div class="teble second-bg">
      <div class="flex align-center js-sp p-title">
        <div class="flex align-center">
          <div class="title">
            {{
              isHosting
                ? $t("hosting.RobotTradingHosting")
                : $t("header.wealthTreasure")
            }}
          </div>
          <div
            class="ml-12 rules-text point"
            v-if="
              state.active == 1
                ? regular_wealth_management_rule
                : current_wealth_management_rule
            "
            @click="state.ruleVisible = true"
          >
            {{ $t("financial.ruleDesc") }}
          </div>
          <i
            v-if="
              state.active == 1
                ? regular_wealth_management_rule
                : current_wealth_management_rule
            "
            class="el-icon-warning-outline text-16 ml-5 point"
            @click="state.ruleVisible = true"
          ></i>
        </div>
        <div
          class="mining-right flex align-center align-center point"
          v-if="islogin"
          @click="toMyWealth"
        >
          <svg-icon
            data-_icon-name="ic_my_wealth"
            class="text-20 mr-6"
          ></svg-icon>
          <div>
            {{
              isHosting ? $t("hosting.myHosting") : $t("financial.myFinancial")
            }}
          </div>
        </div>
        <div
          class="mining-right flex align-center align-center point"
          v-else
          @click="toLogin"
        >
          <div class="mr-6">{{ $t("login.login") }}</div>
          <div class="color-60">
            {{
              isHosting
                ? $t("hosting.ViewMyHosting")
                : $t("financial.viewMyFinancial")
            }}
          </div>
        </div>
      </div>
      <div class="flex align-center js-st type1-p mt-8">
        <!-- <div
          class="mr-20 wealth-tab  text-14 text-bolder point"
          :class="state.active === 2 ? 'active-wealth text-login' : 'color_98'"
          @click="changeManagementType(2)"
        >
          {{ $t("stock.currentFinancial") }}
        </div> -->
        <div
          class="mr-20 wealth-tab  text-14 text-bolder point"
          :class="state.active === 1 ? 'active-wealth text-login' : 'color_98'"
          @click="changeManagementType(1)"
        >
          {{
            isHosting
              ? $t("hosting.robotHosting")
              : $t("stock.regularFinancial")
          }}
        </div>
      </div>
      <div class="type1-p">
        <div class="type-table ">
          <div class="flex align-center flex-wrap js-sp">
            <div
              class="wealth-box text-left mb-20"
              v-for="item in currencylist"
              :key="item.id"
            >
              <div class="wealth-tit text-bold flex align-center">
                <div>{{ item.project_name }}</div>
                <div
                  class="ml-12 text-link bd-link type-tag text-12"
                  v-if="item.use_experience_gold && state.active === 1"
                >
                  {{
                    isHosting && state.active === 1
                      ? $t("hosting.ManagedTrialMoney")
                      : $t("freeMoney.experienceGold")
                  }}
                </div>
              </div>
              <div class="flex align-center js-sp mt-21 mb-24">
                <div>
                  <div>
                    {{
                      item.project_arp_type === 1
                        ? $t("financial.yearRate")
                        : item.project_arp_type === 2
                        ? $t("financial.annualizedRate")
                        : $t("financial.dailyRate")
                    }}
                  </div>
                  <div class="red-text mt-9">
                    {{ (item.rate*100).toFixed(2) }}%
                  </div>
                </div>
                <div>
                  <div>
                    {{
                      isHosting && state.active === 1
                        ? $t("hosting.CustodyCurrency")
                        : $t("financial.Currency")
                    }}
                  </div>
                  <div class="currency-text mt-9 text-blue">
                    {{ item.currency_name }}
                  </div>
                </div>
                <div>
                  <div>
                    {{
                      isHosting && state.active === 1
                        ? $t("hosting.EscrowPeriod")
                        : $t("financial.Deadline")
                    }}
                  </div>
                  <div class="day-text mt-9" v-if="state.active === 1">
                    {{ item.days }}{{ $t("financial.Days") }}
                  </div>
                  <div class="day-text mt-9" v-else>
                    {{ $t("stock.anyStorage") }}
                  </div>
                </div>
              </div>
              <el-progress
                v-if="item.project_share"
                :percentage="
                  (item.project_buy_share / item.project_share) * 100 > 100
                    ? 100
                    : parseFloat(
                        (item.project_buy_share / item.project_share) * 100
                      )
                "
                :show-text="false"
                :stroke-width="10"
                class="mb-4 progress"
              ></el-progress>
              <div class="flex align-center js-sp color-1e mb-30">
                <div>
                  <span>{{ $t("financial.limit") }}</span
                  ><span class="ml-5 main-color"
                    >{{ item.min_number}}U - {{ item.max_number }}</span
                  >
                </div>
                <!-- <div>
                  <span class="main-color"
                    >{{ $currency(item.project_buy_share) }}/{{
                      $currency(item.project_share)
                    }}</span
                  ><span class="ml-5">{{ $t("financial.Shares") }}</span>
                </div> -->
              </div>
              <div class="flex align-center js-sp">
                <div>
                  <div>
                    {{ $t("financial.incomeDistribution") }}：<span
                      class="color-1e"
                      >{{
                        item.user_earnings_type == 1
                          ? $t("financial.distributedDaily")
                          : $t("financial.periodicRelease")
                      }}</span
                    ><el-tooltip class="icons" effect="dark" placement="top">
                      <template #content>
                        <div>
                          <div>
                            {{ $t("financial.incomeDistributionDesc") }}
                          </div>
                          <div>
                            {{ $t("financial.incomeDistributionDesc1") }}
                          </div>
                          <div>
                            {{ $t("financial.incomeDistributionDesc2") }}
                          </div>
                        </div>
                      </template>
                      <i class="el-icon-warning-outline text-16 ml-5"></i>
                    </el-tooltip>
                  </div>
                  <div>
                    {{ $t("financial.rebateType") }}：<span class="color-1e">{{
                      item.user_rebate_type == 1
                        ? $t("financial.transactionAmount")
                        : $t("financial.profit")
                    }}</span
                    ><el-tooltip class="icons" effect="dark" placement="top">
                      <template #content>
                        <div>
                          <div>
                            {{ $t("financial.rebateTypeDesc") }}
                          </div>
                          <div>
                            {{ $t("financial.rebateTypeDesc1") }}
                          </div>
                          <div>
                            {{ $t("financial.rebateTypeDesc2") }}
                          </div>
                          <div>
                            {{ $t("financial.rebateTypeDesc3") }}
                          </div>
                        </div>
                      </template>
                      <i class="el-icon-warning-outline text-16 ml-5"></i>
                    </el-tooltip>
                  </div>
                </div>
                <div
                  class="wealth-btn point"
                  @click="wealthRightNow(item)"
                >
                  {{
                    isHosting && state.active === 1
                      ? $t("hosting.joinHosting")
                      : $t("financial.partInFinancial")
                  }}
                </div>
              </div>
            </div>
            <Norecord v-if="currencylist.length === 0" />
          </div>
        </div>
        <!-- <div class="text-center more-text">
          <Pagination
            :total="state.total"
            :size="state.list_param.limit"
            :current="state.curentPage"
            @currentchange="nextPage"
          />
        </div> -->
      </div>
    </div>
    <el-dialog v-model="state.dialogVisible" center top="210px" width="400px">
      <template #title>
        <div
          class="text-18 text-bolder color_1e flex align-center js-ct flex-column"
        >
          <div class="mb-4">{{ state.wealthInfo.project_name }}</div>
          <div
            class="ml-4 text-link bd-link type-tag text-12"
            v-if="state.wealthInfo.use_experience_gold && state.active === 1"
          >
            {{
              isHosting && state.active === 1
                ? $t("hosting.ManagedTrialMoney")
                : $t("freeMoney.experienceGold")
            }}
          </div>
        </div>
      </template>
      <div class="dialog-box-detail">
        <div class="flex align-center js-sp mb-24">
          <div>
            <div>
              {{
                state.wealthInfo.project_arp_type === 1
                  ? $t("financial.yearRate")
                  : state.wealthInfo.project_arp_type === 2
                  ? $t("financial.annualizedRate")
                  : $t("financial.dailyRate")
              }}
            </div>
            <div class="red-text mt-9">
              {{
                (selectcurrency.rate*100).toFixed(2)
              }}%
            </div>
          </div>
          <div>
            <div>
              {{
                isHosting && state.active === 1
                  ? $t("hosting.CustodyCurrency")
                  : $t("financial.Currency")
              }}
            </div>
            <div class="currency-text mt-9 text-blue">
              {{ selectcurrency.currency_name }}
            </div>
          </div>
          <div>
            <div>
              {{
                isHosting && state.active === 1
                  ? $t("hosting.EscrowPeriod")
                  : $t("financial.Deadline")
              }}
            </div>
            <div class="day-text mt-9" v-if="state.active === 1">
              {{ selectcurrency.days }}{{ $t("financial.Days") }}
            </div>
            <div class="day-text mt-9" v-else>
              {{ $t("stock.anyStorage") }}
            </div>
          </div>
        </div>
        <div
          class="flex align-center js-sp color-1e mb-4"
          v-if="state.active === 1"
        >
          <div>
            <span>{{ $t("financial.limit") }}</span
            ><span class="ml-5 main-color"
              >{{ selectcurrency.min_number }}U - {{ selectcurrency.max_number }}U</span
            >
          </div>
          <!-- <div>
            <span class="main-color"
              >{{ $currency(state.wealthInfo.project_buy_share) }}/{{
                $currency(state.wealthInfo.project_share)
              }}</span
            ><span class="ml-5">{{ $t("financial.Shares") }}</span>
          </div> -->
        </div>
        <!-- <el-progress
          v-if="state.wealthInfo.project_share"
          :percentage="
            (state.wealthInfo.project_buy_share /
              state.wealthInfo.project_share) *
              100 >
            100
              ? 100
              : parseFloat(
                  (state.wealthInfo.project_buy_share /
                    state.wealthInfo.project_share) *
                    100
                )
          "
          :show-text="false"
          :stroke-width="10"
          class=" progress mb-4"
        ></el-progress> -->
        <!-- <div class="flex align-center js-ed mb-24" v-if="state.active === 1">
          <div class="main-color">
            {{
              state.wealthInfo.last_balance_type === 2 &&
              isHosting &&
              state.active === 1
                ? $t("hosting.feeBalance")
                : state.wealthInfo.last_balance_type === 2 && !isHosting
                ? $t("freeMoney.experienceFeBalance")
                : $t("financial.currentlyAvailable")
            }}:
            {{ $currency(state.wealthInfo.last_balance) }}
            {{ state.wealthInfo.project_currency_name }}
          </div>
        </div> -->
        <div
          class="flex align-center js-sp color-1e mb-24"
          v-if="state.active === 2"
        >
          <div>
            <span>{{ $t("financial.unitPrice") }}</span
            ><span class="ml-5 main-color"
              >{{ $currency(state.wealthInfo.project_unit_price)
              }}{{ state.wealthInfo.project_currency_name }}/1{{
                $t("financial.share")
              }}</span
            >
          </div>
          <div>
            <span class="main-color"
              >{{ $currency(state.wealthInfo.project_buy_share) }}/{{
                $currency(state.wealthInfo.project_share)
              }}</span
            ><span class="ml-5">{{ $t("financial.Shares") }}</span>
          </div>
        </div>
        <div class="mb-10 p-16" v-if="state.active === 1">
          <div class="flex align-center js-sp">
            <div class="color-1e font-14">
              {{$t("exchange.purchase")}}
            </div>
            <div class="flex align-center num-box">
              <div class="num-step point" @click="delnum">-</div>
              <el-input
                size="small"
                type="number"
                class="num-input"
                v-model.number="state.num"
                :controls="false"
                @input="changeNum"
              ></el-input>
              <div class="num-step point" @click="addnum">+</div>
            </div>
          </div>

          <div class="flex align-center js-sp text-14 color-98 mt-3">
            <div>{{ $t("lever.expectedprofit") }}</div>
            <div>
              {{Number(state.num) * Number(selectcurrency.rate)}}
            </div>
          </div>
		  <div class="flex align-center js-st">
			  <el-checkbox v-model="isCheck">
			    <div class="break-space">
			      {{ $t("register.readAndAgree") }}
			      {{ $t("register.xieyi") }}
			    </div>
			  </el-checkbox>
		  </div>
        </div>
        <!-- <div class="tips flex align-center js-sp" v-if="state.active === 2">
          <div
            v-if="
              state.wealthInfo.min_buy_share || state.wealthInfo.max_buy_share
            "
          >
            {{ $t("financial.limit") }}：{{
              state.wealthInfo.min_buy_share || ""
            }}{{
              state.wealthInfo.min_buy_share && state.wealthInfo.max_buy_share
                ? "~"
                : ""
            }}{{ state.wealthInfo.max_buy_share || "" }}
            {{ $t("financial.share") }}
          </div>
          <div>
            {{ $t("freeMoney.remainAvailable") }}：{{
              reduceFix(
                state.wealthInfo.project_share,
                state.wealthInfo.project_buy_share
              ) >= 0
                ? reduceFix(
                    state.wealthInfo.max_buy_share,
                    state.wealthInfo.total_buy_share
                  )
                : 0
            }}{{ $t("financial.share") }}
          </div>
        </div> -->
        <div
          class="flex align-center js-sp tips mb-30 p-16 bdb-quoteline"
          v-if="state.active === 2"
        >
          <div>
            <div class="color-1e font-14">
              {{ $t("financial.chooseBuyShare") }}
            </div>
            <div class=" text-10 color-98">{{ $t("financial.chooseTip") }}</div>
          </div>

          <div>
            <div class="flex align-center num-box">
              <div class="num-step point" @click="delnum">-</div>
              <el-input
                size="small"
                type="number"
                class="num-input"
                v-model.number="state.num"
                :controls="false"
                @input="changeNum"
              ></el-input>
              <div class="num-step point" @click="addnum">+</div>
            </div>
          </div>
        </div>
        <!-- 定期理财 -->
        <div v-if="state.active === 1">
          <!-- <div
            class="tips"
            v-if="
              state.wealthInfo.min_buy_share || state.wealthInfo.max_buy_share
            "
          >
            {{ $t("financial.limit") }}：{{
              state.wealthInfo.min_buy_share || ""
            }}{{
              state.wealthInfo.min_buy_share && state.wealthInfo.max_buy_share
                ? "~"
                : ""
            }}{{ state.wealthInfo.max_buy_share || "" }}
            {{ $t("financial.share") }}
          </div> -->
          <!-- <div class="flex align-center js-sp tips mb-30">
            <div>
              {{ $t("financial.requiredAmount") }}:
              {{
                $currency(
                  rideFix(state.wealthInfo.project_unit_price, state.num)
                )
              }}
              {{ state.wealthInfo.project_currency_name }}
            </div>
            <div class="color-2e">
              {{ $t("financial.currentlyAvailable") }}:
              {{ $currency(state.hasCurrency) }}
              {{ state.wealthInfo.project_currency_name }}
            </div>
          </div> -->
        </div>
        <!-- 活期理财 -->
        <div v-if="state.active === 2">
          <div class="flex align-center js-sp tips mb-6">
            <div>
              {{ $t("financial.currentlyAvailable") }}:
              {{ $currency(state.hasCurrency) }}
              {{ state.wealthInfo.project_currency_name }}
            </div>
            <div class="text-link">
              {{ $t("financial.requiredAmount") }}:
              {{
                $currency(
                  rideFix(state.wealthInfo.project_unit_price, state.num)
                )
              }}
              {{ state.wealthInfo.project_currency_name }}
            </div>
          </div>
          <div class="flex align-center js-sp tips mb-24">
            <div
              v-if="
                state.wealthInfo.min_buy_share || state.wealthInfo.max_buy_share
              "
            >
              {{ $t("stock.buyLimit") }}：{{
                state.wealthInfo.min_buy_share || ""
              }}{{
                state.wealthInfo.min_buy_share && state.wealthInfo.max_buy_share
                  ? "~"
                  : ""
              }}{{ state.wealthInfo.max_buy_share || "" }}
              {{ $t("financial.share") }}
            </div>
            <div>
              {{ $t("freeMoney.remainAvailable") }}:{{
                reduceFix(
                  state.wealthInfo.project_share,
                  state.wealthInfo.project_buy_share
                ) >= 0
                  ? $currency(
                      reduceFix(
                        state.wealthInfo.max_buy_share,
                        state.wealthInfo.total_buy_share
                      )
                    )
                  : 0
              }}
              {{ $t("financial.share") }}
            </div>
          </div>
        </div>
        <div class="flex align-center js-sp">
          <div
            class="btns flex align-center js-ct bg-gray point flex-grow-1"
            @click="state.dialogVisible = false"
          >
            <div>{{ $t("formTip.cancel") }}</div>
          </div>
          <div
            class="btns flex align-center js-ct bg-bule point ml-10 flex-grow-1"
            @click="toWealth()"
          >
            <div>{{ $t("legal.buy") }}</div>
          </div>
        </div>
        <div class="p-16 mt-16" v-if="state.active === 3">
          <div class="text-14 text-bolder mb-8 color_1e">
            {{ $t("freeMoney.Overview") }}
          </div>
          <div class="mb-12 text-12 color-98">
            <div class="flex align-center js-sp mb-8">
              <div>{{ $t("freeMoney.perShare") }}</div>
              <div>
                {{ $currency(state.wealthInfo.project_unit_price) }}
                {{ state.wealthInfo.project_currency_name }}
              </div>
            </div>
            <div class="flex align-center js-sp mb-8">
              <div>
                {{
                  isHosting && state.active === 1
                    ? $t("hosting.MinimumHostingShare")
                    : $t("freeMoney.MinimumShare")
                }}
              </div>
              <div>
                {{ $currency(state.wealthInfo.min_buy_share) }}
                {{ $t("financial.share") }}
              </div>
            </div>
            <div class="flex align-center js-sp mb-8">
              <div>{{ $t("freeMoney.limitShare") }}</div>
              <div>
                {{ $currency(state.wealthInfo.max_buy_share) }}
                {{ $t("financial.share") }}
              </div>
            </div>
            <div class="flex align-center js-sp mb-8">
              <div>
                {{
                  isHosting && state.active === 1
                    ? $t("hosting.RemainingHosted")
                    : $t("freeMoney.remainAvailable")
                }}
              </div>
              <div>
                {{
                  reduceFix(
                    state.wealthInfo.project_share,
                    state.wealthInfo.project_buy_share
                  ) >= 0 &&
                  reduceFix(
                    state.wealthInfo.max_buy_share,
                    state.wealthInfo.total_buy_share
                  ) >= 0
                    ? $currency(
                        reduceFix(
                          state.wealthInfo.max_buy_share,
                          state.wealthInfo.total_buy_share
                        )
                      )
                    : 0
                }}
                {{ $t("financial.share") }}
              </div>
            </div>
            <div class="flex align-center js-sp mb-8">
              <div>{{ $t("freeMoney.effectiveTime") }}</div>
              <div>{{ getTimeZoneDate(new Date().getTime()) }}</div>
            </div>
            <div class="flex align-center js-sp">
              <div>{{ $t("freeMoney.redemptionTime") }}</div>
              <div>
                {{
                  getTimeZoneDate(
                    new Date().getTime() +
                      state.wealthInfo?.project_deadline_day *
                        24 *
                        60 *
                        60 *
                        1000
                  )
                }}
              </div>
            </div>
          </div>
          <div
            class="over-bg p-12 radius color-98"
            v-if="state.wealthInfo.special_instructions"
          >
            <div>{{ $t("freeMoney.specialInstructions") }}：</div>
            <div v-html="state.wealthInfo.special_instructions"></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="state.successInfo.project_name"
      v-model="state.tipVisible"
      center
      top="210px"
      width="400px"
    >
      <div class="dialog-box text-center">
        <div class=" flex align-center mb-20 flex-column">
          <img src="@/assets/images/success.png" class="status" />
          <div class="status-tip">
            {{
              isHosting && state.active === 1
                ? $t("hosting.HostingSuccessShare")
                : $t("financial.successfulSubscription")
            }}:{{ $currency(state.successInfo.active_share)
            }}{{ $t("financial.share") }}
          </div>
        </div>
        <div class="flex align-center js-ct mb-40">
          <div class="flex-grow-1">
            <img
              src="@/assets/images/distribute.png"
              alt=""
              class="pool-icon"
            />
            <div class="text-bolder mb-4 ">
              {{ getTimeZoneDate(state.successInfo.allocated_time) }}
            </div>
            <div>{{ $t("financial.allotmenShares") }}</div>
          </div>
          <div class="flex-shrink-0">
            <img
              src="@/assets/images/toright.png"
              alt=""
              class="toright is-rtl-icon "
            />
          </div>
          <div class="flex-grow-1">
            <img src="@/assets/images/get.png" alt="" class="pool-icon" />
            <div class="text-bolder mb-4 ">
              {{ getTimeZoneDate(state.successInfo.earning_time) }}
            </div>
            <div>{{ $t("financial.calculateIncome") }}</div>
          </div>
        </div>
        <div class="flex align-center js-ct tips mb-10">
          {{ $t("financial.available") }}
          <span class="color-2e point" @click="toMyWealth">{{
            isHosting && state.active === 1
              ? $t("hosting.myHosting")
              : $t("financial.myFinancial")
          }}</span>
          {{ $t("financial.checkIncome") }}
        </div>
        <div class="flex align-center js-ct">
          <div
            class="tip-btn flex align-center js-ct bg-bule point"
            @click="state.tipVisible = false"
          >
            <div>{{ $t("formTip.comfirm") }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('financial.ruleDesc')"
      v-model="state.ruleVisible"
      center
      top="210px"
      width="500px"
    >
      <div class="dialog-box">
        <div class="text-left">
          <div
            class="font-14 color_42 "
            v-html="
              state.active === 1
                ? state.rule?.protocol_content
                : state.rule1?.protocol_content
            "
          ></div>
        </div>
        <!-- <div class="flex align-center js-ct">
          <div
            class="tip-btn flex align-center js-ct bg-bule point"
            @click="state.ruleVisible = false"
          >
            <div>{{ $t("financial.hanKnow") }}</div>
          </div>
        </div> -->
      </div>
    </el-dialog>
    <!-- 客服弹窗 -->
    <ServerBox
      @oncancer="onCancel"
      @onconfirm="onCancel"
      :dialog="state.dialog"
    />
    <!-- 没有激活 -->
    <el-dialog
      :title="$t('formTip.tip')"
      v-model="state.hostDialog"
      append-to-body
      center
      top="210px"
      width="400px"
    >
      <div class="dialog-box">
        <div class="mb-30 text-left">
          <div class="font-14 color-1e text-bolder">
            {{ $t("hosting.noActivatedTip") }}
          </div>
        </div>
        <div class="flex align-center js-sp">
          <div
            class="tip-btn flex align-center js-ct bg-bule point flex-grow-1"
            @click="state.hostDialog = false"
          >
            <div>{{ $t("cancel") }}</div>
          </div>
          <div
            class="tip-btn flex align-center js-ct bg-bule point ml-20 flex-grow-1"
            @click="serverPop"
          >
            <div>{{ $t("reputation.Contact") }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <VerifiedBox
      :text="$t('formTip.certificationTip1')"
      :dialog="state.dialogVerfiedTip"
      :type="state.type"
      @onconfirm="onConfirm"
      @viewSafeStatus="onConfirm"
      @oncancer="onCancel"
    />
  </div>
</template>

<script>
import { reactive, onMounted, computed,ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { decimalDigitsInputFilter, toBeNumber } from "@/utils/common";
import { getcurrencytypes,buycurrencysubmit } from "@/api/user"
import { rideFix, reduceFix } from "@/utils/precisionMath";
import { getTimeZoneDate } from "@/utils/times";
import Pagination from "@/components/pagination/index.vue";
import {
  wealthManagementDetails,
  activeWealthBuy,
  wealthManagementPage,
  getWalletFinancialInfo,
  userWealthManagement,
  userWealthManagementRobotStatus,
} from "@/api/wealth";
import { getProtocol } from "@/api/article";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import Norecord from "@/components/noRecord/NoRecord.vue";
import VerifiedBox from "@/components/verifiedBox/index.vue";
import ServerBox from "@/components/homeModel/serverBox.vue";
import jumpChat from "@/commonapi/chat";
import useProtocolSetting from "@/commonapi/useProtocolSetting";

export default {
  components: { Norecord, Pagination, VerifiedBox, ServerBox },
  setup() {
    const { t } = useI18n();
    const $store = useStore();
    const $router = useRouter();
    const state = reactive({
      type: 0,
      active: 1,
      activeName: 1,
      dialogVisible: false,
      list_param: { limit: 10, page: 0 },
      currentPage: 0,
      rule: {},
      rule1: {},
      tableData: [],
      loading: false,
      tipVisible: false,
      ruleVisible: false,
      isMine: false,
      isAll: false,
      wealthInfo: {},
      assetsData: {},
      successInfo: {},
      hasCurrency: 0,
      num: 0,
      total: 0,
      curentPage: 1,
      dialogVerfiedTip: false,
      hostDialog: false,
      robotStatus: false,
      dialog: false, //客服弹窗
      service_url: "",
    });
    const { chatActive, chat } = jumpChat();
    const islogin = computed(() => {
      return $store.state.user.token ? true : false;
    });
    const securityInfo = computed(() => {
      return $store.state.user.securityInfo;
    });
    const systemInfo = computed(() => {
      return $store.state.user.systemInfo;
    });
    const getConfig = () => {
      if (systemInfo.value) {
        systemInfo.value.forEach((ele) => {
          if (ele.key === "service_url") {
            const show = ele.value; //online-在线客服页；contact-社交客服页
            state.service_url = show;
            state.dialog = false;
            if (state.service_url === "contact") {
              // 在线客服打开注释
              // zE(function() {
              //   zE.hide();
              // });
            } else {
              chat();
              // 在线客服
            }
          }
        });
      }
    };
    const serverPop = () => {
      state.hostDialog = false;
      if (state.service_url === "contact") {
        state.dialog = true;
      } else {
        chatActive();
      }
    };
    const getAll = (val) => {
      state.isAll = val;
    };
    const nextPage = (val) => {
      console.log(val);
      document.documentElement.scrollTop = 0;
      state.currentPage = val;
      getList();
    };
    const getData = (val) => {
      let param = { protocol_type_tag: val };
      getProtocol(param)
        .then((res) => {
          if (val === "current_wealth_management_rule") {
            state.rule1 = res.data;
          } else {
            state.rule = res.data;
          }
        })
        .catch(() => {
          state.rule = {};
        });
    };
    // 获取协议状态
    const {
      regular_wealth_management_rule,
      current_wealth_management_rule,
    } = useProtocolSetting();
    const changeManagementType = (val) => {
      state.active = val;
      if (val == 1) {
        if (regular_wealth_management_rule.value) {
          getData("regular_wealth_management_rule");
        }
      } else {
        if (current_wealth_management_rule.value) {
          getData("current_wealth_management_rule");
        }
      }
      state.currentPage = 0;
      getList();
    };
    const getList = () => {
      const data = { ...state.list_param };
      data.page = state.currentPage;
      data.management_type = state.active;
      state.loading = true;
      wealthManagementPage(data)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data.items;
          state.total = res.data.total;
          // state.total = res.data.total
        })
        .catch((err) => {
          // ElMessage.error(err.message);
          console.log(err);
        });
    };
    // 资产详情
    const getassetsInfo = () => {
      let data = {
        currency_id: state.wealthInfo.project_currency_id,
      };
      getWalletFinancialInfo(data)
        .then((res) => {
          state.hasCurrency = res.data.financial_balance;
        })
        .catch((err) => {
          ElMessage.error(err.message);
        });
    };
    const onConfirm = () => {
      state.dialogVerfiedTip = false;
      $router.push("/person/Authentication");
    };
    const onCancel = () => {
      state.dialogVerfiedTip = false;
      state.dialog = false;
      state.hostDialog = false;
    };
    //是否需要实名
    const isVerified = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "verify_switch") {
          if (ele.value[3] && securityInfo.value.user_auth_level !== 2) {
            if (securityInfo.value.user_auth_level !== 4) {
              state.type = 1;
            }
            flag = true;
          }
        }
      });
      return flag;
    });
    //是否是托管1理财宝2托管
    const isHosting = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "wealth_management_type") {
          if (ele.value === 2) {
            flag = true;
          }
        }
      });
      return flag;
    });

    //立即理财
	const selectcurrency = ref([])
    const wealthRightNow = (id) => {
      selectcurrency.value = id
	  state.num = 0
	  state.dialogVisible = true;
    };
    // 确定理财
    const toWealth = (id) => {
		if(!isCheck.value){
			ElMessage.error(t("register.tongyi"));
			return;
		}
      if (state.num > selectcurrency.value.max_number) {
        ElMessage.error(
          t("financial.maxShare", { share: selectcurrency.value.max_number })
        );
        state.num = selectcurrency.value.max_number;
        return;
      }
      if (state.num < selectcurrency.value.min_number) {
        ElMessage.error(
          t("financial.minShare", { share: selectcurrency.value.min_number })
        );
        state.num = selectcurrency.value.min_number;
        return;
      }
	  let data = {
		  number:state.num,
		  type_id:selectcurrency.value.id
	  }
	  buycurrencysubmit(data).then((res) => {
		  if(res.code == 1){
			  ElMessage.success(res.msg);
			  state.num = 0
			  state.dialogVisible = false
		  }else{
			  ElMessage.error(res.msg);
		  }
	  })
      // if (
      //   state.wealthInfo.project_unit_price * state.num <=
      //   state.wealthInfo.last_balance
      // ) {
      //   if (
      //     parseInt(state.num) <=
      //     reduceFix(
      //       state.wealthInfo.max_buy_share,
      //       state.wealthInfo.total_buy_share
      //     )
      //   ) {
      //     let data = {
      //       order_share: state.num,
      //       wealth_management_id: id,
      //     };
      //     activeWealthBuy(data).then((res) => {
      //       if (res.code === 200) {
      //         console.log(res.data);
      //         state.dialogVisible = false;
      //         state.tipVisible = true;
      //         getDetail(res.data.id);
      //         getList();
      //         // state.successInfo = { ...res.data };
      //       }
      //       // ElMessage({
      //       //   type: "success",
      //       //   message: res.message
      //       // });
      //     });
      //   } else {
      //     let num = reduceFix(
      //       state.wealthInfo.max_buy_share,
      //       state.wealthInfo.total_buy_share
      //     );
      //     ElMessage.error(
      //       t("freeMoney.copiesRemaining", { amount: num >= 0 ? num : 0 })
      //     );
      //   }
      // } else {
      //   ElMessage.error(t("formTip.defiTip1"));
      // }
    };
    const getDetail = (id) => {
      userWealthManagement(id).then((res) => {
        state.successInfo = { ...res.data };
      });
    };
    //跳转登录
    const toLogin = () => {
      $router.push("/login");
    };
    const toMyWealth = () => {
      state.tipVisible = false;
      $router.push("/myWealth");
    };
    const changeNum = (val) => {
      if (val) {
        let tempV = toBeNumber(val);
        state.num = decimalDigitsInputFilter(tempV, 0);
      } else {
        state.num = 1;
      }
    };
    const addnum = () => {
      state.num = state.num + 1;
    };
    const delnum = () => {
      if (state.num > 1) {
        state.num = state.num - 1;
      }
    };
    //获取理财机器人托管状态
    const getRobotStatus = () => {
      userWealthManagementRobotStatus().then((res) => {
        state.robotStatus = res.data.value;
      });
    };
    // 获取资产信息
    onMounted(() => {
      getList();
      if (current_wealth_management_rule.value) {
        getData("current_wealth_management_rule");
      }
      getRobotStatus();
      getConfig();
	  
	  getcurrency()
    });
	
	const currencylist = ref([])
	const getcurrency = () => {
		getcurrencytypes().then((res)=> {
			if(res.code == 1){
				currencylist.value =  res.data
			}
		})
	}
	const isCheck = ref(false)
    return {
      state,
      islogin,
      decimalDigitsInputFilter,
      getAll,
      nextPage,
      wealthRightNow,
      getassetsInfo,
      toLogin,
      toWealth,
      toMyWealth,
      getTimeZoneDate,
      getList,
      changeNum,
      toBeNumber,
      addnum,
      delnum,
      getDetail,
      onConfirm,
      onCancel,
      isVerified,
      rideFix,
      getData,
      changeManagementType,
      reduceFix,
      isHosting,
      securityInfo,
      getRobotStatus,
      chatActive,
      systemInfo,
      getConfig,
      chat,
      serverPop,
      regular_wealth_management_rule,
      current_wealth_management_rule,
	  
	  // 新__
	  currencylist,
	  selectcurrency,
	  isCheck
    };
  },
};
</script>

<style lang="less" scoped>
.mb-6 {
  margin-bottom: 6px;
}
.pb-16 {
  padding-bottom: 16px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-21 {
  margin-top: 21px;
}
.mt-9 {
  margin-top: 9px;
}
.mt-3 {
  margin-top: 3px;
}
.red-text {
  color: #ff6a6a;
  font-weight: bold;
  line-height: 15px;
}
.currency-text {
  // color: #3771e2;
  font-weight: bold;
  line-height: 15px;
}
.day-text {
  color: #121212;
  font-weight: bold;
  line-height: 15px;
}
.color-1e {
  color: #121212;
}
.font-14 {
  font-size: 14px;
  line-height: 20px;
}
.font-10 {
  font-size: 10px;
  line-height: 14px;
  color: #989898;
}
.p-16 {
  padding: 16px 0;
  border-top: 1px solid #eaecef;
  // border-bottom: 1px solid #eaecef;
}
.p-12 {
  padding: 12px;
}
.btn {
  width: 120px;
  height: 32px;
  line-height: 32px;
  margin-inline-end: 30px;
}
.empty-btn {
  width: 170px;
  height: 46px;
  line-height: 46px;
  margin: 0 auto 60px;
}
.l-10 {
  line-height: 10px;
}
.mr-8 {
  margin-inline-end: 8px;
}
.text-20 {
  font-size: 20px;
}
.mr-6 {
  margin-inline-end: 6px;
}
.teble {
  width: 100%;
  border-radius: 10px;
  margin: 0 auto 60px;
}
.type-table {
  border-radius: 10px;
  // border: 1px solid #eaecef;
  overflow: hidden;
}
title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #121212;
}
@media (max-width: 1439px) {
  .p-title {
    padding: 48px 80px 0;
  }
  .type1-p {
    padding: 26px 80px 0;
  }
}
@media (min-width: 1440px) {
  .p-title {
    padding: 48px 160px 0;
  }
  .type1-p {
    padding: 26px 160px 0;
  }
}
.wealth-tab {
  padding: 2px 4px;
}
.active-wealth {
  background: @tab-active;
  border-radius: 4px;
}
.title {
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  color: #121212;
}
.mining-right {
  height: 36px;
  padding: 8px 10px;
  background: @blue;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}
.color-60 {
  color: rgba(255, 255, 255, 0.6);
}
.color-98 {
  color: #989898;
}
.dialog-box {
  padding: 5px 5px 10px;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #424344;
}
.dialog-box-detail {
  padding: 5px 0px 10px;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #424344;
}
.w_50 {
  width: 50%;
}
.el-table__row .table-rowheight:last-child td {
  border-bottom: 1px solid #fff;
}
.tips {
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #989898;
}
.color-2e {
  color: @blue;
}
.bg-bule {
  background: @blue;
}
.bg-gray {
  background: #c1c1c1;
}
.btns {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  width: 50%;
  height: 46px;
  border-radius: 4px;
}
.tip-btn {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  color: #ffffff;
  height: 46px;
  border-radius: 4px;
}
.mr-20 {
  margin-inline-end: 20px;
}
.ml-4 {
  margin-inline-start: 4px;
}
.ml-12 {
  margin-inline-start: 12px;
}
.ml-10 {
  margin-inline-start: 10px;
}
.ml-20 {
  margin-inline-start: 20px;
}
.mb-4 {
  margin-bottom: 4px;
}
.rules-text {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #c1c1c1;
}
.ml-5 {
  margin-inline-start: 5px;
}
.status {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin-bottom: 12px;
}
.status-tip {
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: #60ad76;
}
.toright {
  width: 58.5px;
  height: 6px;
  display: inline-block;
  margin-top: -10px;
}
.pool-icon {
  width: 36px;
  height: 36px;
  display: inline-block;
  margin-bottom: 8px;
}
.back {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: #2e96f7;
}
.more-text {
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #c1c1c1;
  padding: 22px;
  // border: 1px solid #eaecef;
  border-top: none;
}
.wealth-box {
  padding: 21px 32px 30px;
  box-sizing: border-box;
  width: 47%;
  margin-inline-end: 20px;
  background: #ffffff;
  border: 1px solid #eaecef;
  box-sizing: border-box;
  border-radius: 10px;
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  color: #888888;
}
.wealth-box:nth-child(2n) {
  margin-inline-end: 0px;
}
.wealth-tit {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaecef;
}
.type-tag {
  font-weight: 500;
  min-height: 22px;
  line-height: 20px;
  padding: 0 10px;
  border-radius: 2px;
}
.main-color {
  color: @blue;
}
.wealth-btn {
  min-width: 120px;
  padding: 13px 32px;
  box-sizing: border-box;
  min-height: 46px;
  text-align: start;
  background: @blue;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
}
.saled {
  background: @blue;
  opacity: 0.3;
}
.num-step {
  height: 100%;
  width: 34px;
  line-height: 34px;
  font-size: 20px;
  text-align: center;
}
.num-box {
  background: #f8f8f8;
  border-radius: 4px;
}
.num-input {
  border-top: none;
  border-bottom: none;
  width: 70px;
  .el-input__inner {
    text-align: center;
  }
}
.is-rtl {
  .progress:deep(.el-progress-bar__inner) {
    left: auto;
    right: 0;
  }
}
.banner {
  width: 100%;
  height: 430px;
  // background: #f4f7f9;
  background-image: url("../../assets/defibanner.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.phone-img {
  width: 324px;
  height: 100%;
  display: block;
  margin-inline-start: 164px;
}
.tit {
  font-style: normal;
  font-weight: 900;
  font-size: 36px;
  line-height: 50px;
  margin-bottom: 14px;
}
.banner-text {
  padding-inline-start: 24.3%;
}
.mt-8 {
  margin-top: 8px;
}
.font-20 {
  font-size: 20px;
  line-height: 28px;
}
.w-50 {
  width: 50%;
}
</style>
<style>
.home .el-table .el-table__row:last-child td {
  border: none;
}
.progress .el-progress-bar__inner {
  background: linear-gradient(90deg, #3771e2 0%, #134cbc 100%);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
.num-input .el-input__inner:hover {
  border-color: #f8f8f8;
}
.num-input .el-input__inner {
  border-top: none;
  border-bottom: none;
  background-color: #f8f8f8;
}
.num-input input {
  text-align: center;
}
</style>
